<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="排名" />
    <el-table-column prop="keyword" label="关键字" />
    <el-table-column prop="num" label="搜索数量" />
    <el-table-column prop="user" label="用户数" />
    <el-table-column prop="much" label="搜索占比" />
  </el-table>

  <el-pagination
    v-model:currentPage="currentPage1"
    :page-size="10"
    layout="total, prev, pager, next"
    :total="100"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts">
export default {
  name: "SearchTable",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
const currentPage1 = ref(1);
const handleSizeChange = () => {
  console.log(123);
};
const handleCurrentChange = () => {
  console.log(222);
};
const tableData = [
  {
    keyword: "北京",
    num: "1,234",
    user: "343,434",
    much: "12%",
  },
  {
    keyword: "上海",
    num: "1,344",
    user: "8783,434",
    much: "45%",
  },
  {
    keyword: "广州",
    num: "2,234",
    user: "334,434",
    much: "56%",
  },
  {
    keyword: "深圳",
    num: "1,263",
    user: "33233,434",
    much: "33%",
  },
];
</script>

<style scoped></style>
